<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<link href="Css/backstage_common_v2.11.css" rel="stylesheet" />
		<link href="Css/backstage_v2.11.css" rel="stylesheet" />
		<script src="Js/jquery-1.11.3.min.js"></script>
		<script src="Js/common.js"></script>
		<title>娱乐系统设置</title>
	</head>
	<body>
		<div class="pub-title">后台管理</div>
		<ul class="pub-tab">
			<li class="option-list">
				<a href="permission_person.html" class="option">管理员</a>
				<a href="permission_group.html" class="option on">权限组</a>
			</li>
			<li class="tab-block-list">				
					<div class="pub-item">
						<span class="field-name field-name-w90 required">权限组名称</span>
						<div class="field-value">
							<input type="text" class="text">
						</div>
					</div>
					<div class="pub-item">
						<span class="field-name field-name-w90 required">权&nbsp;限</span>
						<div class="field-value">
							<div class="permission-block">
								<label><input type="checkbox" class="j-all"> 全选</label>
								<div class="permission-list">
									<label class="permission-field pub-bold"><input type="checkbox" class="j-all2"> 商品管理</label>
									<div class="permission-list2">
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
									</div>
								</div>
								<div class="permission-list">
									<label class="permission-field pub-bold"><input type="checkbox" class="j-all2"> 商品管理</label>
									<div class="permission-list2">
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
									</div>
								</div>
								<div class="permission-list">
									<label class="permission-field pub-bold"><input type="checkbox" class="j-all2"> 商品管理</label>
									<div class="permission-list2">
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
										<label class="permission-field pub-textellipsis"><input type="checkbox" class="j-all3"> 商品管理</label>
									</div>
								</div>
						</div>
					</div>
					<div class="pub-item pub-item-button">
						<span class="field-name field-name-w90 "></span>
						<span class="fieldvalue">
							<a href="#" class="pub-btn">提交</a>
						</span>
					</div>

			</li>
		</ul>
	</body>
</html>

<script>

//全选
$('.permission-block .j-all').change(function(){
	var p=$(this).parents('.permission-block');
	p.find('.j-all2,.j-all3').prop('checked',this.checked);
});

//全选二级分类
$('.permission-block .j-all2').change(function(){
	var p=$(this).parents('.permission-list');
	p.find('.j-all3').prop('checked',this.checked);
	var obj=$(this).parents('.permission-block');
	if(obj.find('.j-all2').length==obj.find('.j-all2:checked').length){
		obj.find('.j-all').prop('checked',true);
	}else{
		obj.find('.j-all').prop('checked',false);
	}
});

$('.permission-block .j-all3').change(function(){
	if(this.checked){
		var obj=$(this).parents('.permission-list2');
		if(obj.find('.j-all3').length==obj.find('.j-all3:checked').length){
			$(this).parents('.permission-list').find('.j-all2').prop('checked',true);
			var obj2=$(this).parents('.permission-block');
			if(obj2.find('.j-all2').length==obj2.find('.j-all2:checked').length){
				obj2.find('.j-all').prop('checked',true);
			}
		}
	}else{
		$(this).parents('.permission-list').find('.j-all2').prop('checked',false);
		$(this).parents('.permission-block').find('.j-all').prop('checked',false);
	}
});
</script>